<!-- quan-content -->
<template>
    <div class="quan-content main-con">
        <con-outer>
            <div class="outer">
                <!-- 切换标签 -->
                <div class="quant-tabs">
                    <ul>
                        <li
                        @click="handleChangeTab(tab.id)"
                        :class="getActive(tab.id)"
                        v-for="tab in tabs"
                        :key="tab.id">
                            {{ tab.text }}
                        </li>
                    </ul>
                </div>
                <!-- 内容组件 -->
                <div class="quant-tab-con">
                    <quant-static :active="active"></quant-static>
                </div>
            </div>
        </con-outer>
    </div>
</template>

<script>

export default {
    name: 'quan-content',
    components: {
        // 异步引入组件
        'quant-static': () => import(/* webpackChunkName: "quant-static" */'@/components/quant/quant-static'),
        'con-outer': () => import(/* webpackChunkName: "con-outer" */'@/components/wrapper/con-outer'),
    },
    data() {
        return {
            // Tabs 内容
            tabs: [{
                id: 0,
                text: '人员统计',
            }, {
                id: 1,
                text: '任务统计',
            }],
            // 当前高亮的标签值
            active: 0,
        };
    },
    methods: {
        // 添加高亮类命
        getActive(id) {
            return id === this.active ? 'active-tab' : '';
        },

        // 点击切换tab 改变高亮值
        handleChangeTab(id) {
            this.active = id;
        },
    },
};
</script>
<style lang='scss'>
.quan-content {
    width: 100%;
    height: calc(100% - 90px);
    padding: 15px 25px;
    box-sizing: border-box;
    background: rgba(5,30,85,0.20);
    box-shadow: inset 0px 0px 37px 0px rgba(12,94,189,0.33);

    .outer {
        width: 100%;
        height: 100%;

        .quant-tabs {
            height: 50px;
            background: rgba(0, 0, 0, .1);

            ul {
                height: 100%;
                li {
                    display: inline-block;
                    height: 50px;
                    line-height: 50px;
                    padding: 0 24px;
                    background: rgba(5,30,85,0.20);
                    color: #99ACC0;
                    font-size: 16px;
                    cursor: pointer;
                }

                .active-tab {
                    color: #1391FF;
                    font-weight: 400;
                    background: linear-gradient(180deg,
                    rgba(43,196,255,0.00) 0%, rgba(19,145,255,0.30) 100%);
                }

            }

        }
        .quant-tab-con {
            width: 100%;
            height: calc(100% - 50px);
            padding: 20px;
            box-sizing: border-box;

            @import '../../common/styles/table.scss';
        }
    }
}

</style>
